import React, { FC } from "react";
import { connect, ConnectedProps } from "react-redux";
import { Dispatch } from "redux";
import { State } from "../../store/reducer"; // Replace with your root reducer type

interface Props extends PropsFromRedux {
  dispatch: Dispatch;
}

const TestRedux: FC<Props> = ({ counter, dispatch }) => {
  const increment = () => dispatch({ type: "INCREMENT" });
  const decrement = () => dispatch({ type: "DECREMENT" });

  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-add" onClick={increment}>
        Add
      </button>
      <button data-testid="button-sub" onClick={decrement}>
        Sub
      </button>
    </>
  );
};

const mapState = (state: State) => ({
  counter: state.count,
});

const connector = connect(mapState);

type PropsFromRedux = ConnectedProps<typeof connector>;

export default connector(TestRedux);
